<template>
  <div class="map-container">
    <div class="map-header">
      <van-nav-bar
        title="城市定位"
        left-text="返回"
        left-arrow
        @click-left="$router.back()"
      />
      <!-- 
        @click-right="onClickRight" -->
    </div>

    <div class="map-middle-search">
      <van-search
        shape="round"
        background="#f8f8f8"
        placeholder="请输入搜索关键词"
        class="map-search"
        v-model="keyword"
      />
    </div>

    <div class="map-tigs">
      <van-cell
        :title="item.name"
        is-link
        v-for="item in list"
        :key="item.id"
        class="tigs"
        title-class="title-class"
        @click="tohome(item)"
      />
    </div>

    <div class="map-main">
      <div id="container"></div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      keyword: "",
      list: [],
    };
  },
  methods: {
    tohome(item) {
      this.$store.commit("LACATION", item);
      this.$router.push("/home");
    },
  },
  computed: {
    ...mapState(["locationInfo"]),
  },
  watch: {
    keyword() {
      let that = this;
      AMap.plugin("AMap.AutoComplete", function () {
        var autoOptions = {
          //city 限定城市，默认全国
          city: that.keyword,
        };
        // 实例化AutoComplete
        var autoComplete = new AMap.AutoComplete(autoOptions);
        // 根据关键字进行搜索
        autoComplete.search(that.keyword, function (status, result) {
          // 搜索成功时，result即是对应的匹配数据
          that.list = result.tips;
        });
      });
    },
  },
  mounted() {
    let lng, lat;
    if (!this.locationInfo.name) {
      lat = this.locationInfo.bounds.northEast.lat;
      lng = this.locationInfo.bounds.northEast.lng;
    } else {
      lat = this.locationInfo.location.lat;
      lng = this.locationInfo.location.lng;
    }
    var map = new AMap.Map("container", {
      zoom: 10, //级别
      center: [lng, lat], //中心点坐标
    });

    //文本提示框
    var marker = new AMap.Marker({
      position: new AMap.LngLat(lng, lat),
      icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
    });
    marker.setMap(map);
    marker.setLabel({
      direction: "top-center",
      content: `<div class='info'>${this.locationInfo.name||this.locationInfo.city}</div>`, //设置文本标注内容
    });
    map.add(marker);
  },
};
</script>


<style scoped lang='scss'>
.map-container {
  .map-middle-search {
    height: 70px;
    padding: 0 20px;
    margin-top: 36px;
    .map-search {
      width: 100%;
      height: 100%;
      border-radius: 35px;
    }
  }
  .map-main {
    width: 100%;
    padding: 0 20px;
    height: 342px;
    position: fixed;
    left: 0;
    bottom: 100px;
    #container {
      width: 100%;
      height: 100%;
    }
  }
  .tigs {
    padding: 30px 26px 26px 52px;
  }
  .title-class {
    font-size: 26px;
    color: #333333;
    letter-spacing: 0;
    font-weight: 400;
  }
}
</style>

<style lang="scss">
.map-container {
  .van-nav-bar__title {
    font-size: 36px;
    color: #333333;
    letter-spacing: 0;
    font-weight: 500;
  }
  .van-nav-bar .van-icon {
    color: #000;
  }
  .van-nav-bar__text {
    font-size: 31.2px;
    color: #666666;
    letter-spacing: 0;
    font-weight: 400;
  }
  .amap-icon img {
    width: 25px;
    height: 34px;
  }

  .amap-marker-label {
    border: 0;
    background-color: transparent;
  }

  .info {
    position: relative;
    margin: 0;
    top: 0;
    right: 0;
    min-width: 0;
  }
}
</style>